<template>
  <div class="flex" style="height: 100%;margin-right: 10px;">
    <Poptip placement="bottom" width="300" :word-wrap="true" padding="0" @on-popper-show="onInit">
      <div style="position: relative;cursor: pointer">
        <Icon type="md-notifications-outline" :size="23" style="font-weight: bold"/>
        <sup class="ivu-badge-count" v-if="total">{{total}}</sup>
      </div>
      <div class="api" slot="content">
        <div class="flex" style="background: white;z-index: 100;height: 44px;padding-top: 40px;">
          <Tabs value="name1" @on-click="onChange" v-model="form.state">
            <TabPane label="通知" name="0" context-menu></TabPane>
            <TabPane label="已读" name="1"></TabPane>
            <TabPane label="未读" name="2" context-menu></TabPane>
          </Tabs>
        </div>
        <div class="ivu-notifications-container">
          <div class="ivu-notifications-container-list">
            <div class="ivu-notifications-item" v-for="(n,i) in list" @click="messageChangeApi(i)" :key="i">
              <div class="ivu-notifications-item-icon">
                    <span class="ivu-avatar ivu-avatar-circle ivu-avatar-icon ivu-avatar-default"
                          style="background-color: rgb(51, 145, 229);">
                      <i class="ivu-icon ivu-icon-md-mail"></i></span>
              </div>
              <div class="ivu-notifications-item-content">
                <div class="ivu-notifications-title" :class="n.state === 1 ? 'ivu-notifications-title-al' : ''">
                  蒂姆·库克回复了你的邮件库克回复了你的邮件
                </div>
                <div class="ivu-notifications-item-content-time">2019-05-08 14:33:18</div>
              </div>
            </div>
          </div>
          <div class="flex" style="position: relative;">
            <Spin class="cus-auto-body-more" style="display: -webkit-box" v-if="loading"></Spin>
            <div class="cus-auto-body-more" style="height: 40px;" @click="onMore" v-if="!loading && !finished">查看更多
            </div>
            <div class="flex" v-if="finished && !list.length">
              <img src="./assets/消息列表为空.png" alt="" style="width: 200px;">
            </div>
          </div>
        </div>
        <div class="ivu-notifications-footer">
          <Icon type="md-notifications-outline"></Icon>
          <div>全部已读</div>
        </div>
      </div>
    </Poptip>
  </div>
</template>

<script>
export default {
  name: 'message',
  data () {
    return {
      form: {
        state: '0'
      },
      total: 0,
      list: [],
      loading: true,
      finished: false,
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      }
    }
  },
  mounted () {
    // 开启轮询
    /* setInterval(() => {
        this.getMessageListApi(true);
      }, 10000); */
  },
  methods: {
    onInit(){
      this.onReset();
    },
    onReset () {
      this.pages.page = 1
      this.list = []
      this.finished = false
      this.loading = true
      this.getMessageListApi()
    },
    onMore () {
      this.getMessageListApi()
    },
    onChange () {
      this.onReset()
    },
    // 查看消息列表
    getMessageListApi (getTotal) {
      return new Promise(resolve => {
        getMessageList({
          currentPage: this.pages.page,
          pageSize: this.pages.pageSize
        }).then(res => {
          if (res.code === 1) {
            if (getTotal) {
              this.total = res.result.total
              return resolve
            }
            this.loading = false
            this.pages.page += 1
            this.list = this.list.concat(res.result.list)
            if (res.result.list.length - 1 < this.pages.pageSize) this.finished = true
            resolve()
          } else this.loading = false
        })
      })
    },
    // 状态切换至已读
    messageChangeApi (index) {
      return new Promise(resolve => {
        messageChange({}).then(res => {
          if (res.code === 1) {
            this.list[index]['state'] = 1
            this.getMessageListApi(true)
            resolve()
          }
        })
      })
    }
  }
}
</script>

<style>
  .cus-auto-body-more {
    color: #3399ff;
    text-align: center;
    font-size: 13px;
    height: 32px;
    padding-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .cus-auto-body-more:hover {
    color: #5cadff;
  }
</style>
<style scoped lang="scss">
  .ivu-notifications-container {
    position: relative;
    max-height: 400px;
    width: 300px;
    overflow: auto;
    padding: 5px;

    .ivu-notifications-container-list {
      display: flex;
      flex-direction: column;

      .ivu-notifications-item {
        padding: 12px 20px;
        border-bottom: 1px solid #e8eaec;
        cursor: pointer;
        -webkit-transition: background-color .2s ease-in-out;
        transition: background-color .2s ease-in-out;
        display: flex;
        align-items: center;

        &-icon {
          margin-right: 10px;
        }

        &-content {
          display: flex;
          flex-direction: column;
          flex: 1;

          .ivu-notifications-title {
            font-size: 14px;
            color: #515a6e;
          }

          .ivu-notifications-title-al {
            color: #aaa9a9;
          }

          &-time {
            font-size: 12px;
            color: #808695;
          }
        }
      }

      .ivu-notifications-item:hover {
        background-color: #f0faff;
      }
    }
  }

  .ivu-notifications-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    border-top: 1px solid #e8eaec;
    cursor: pointer;
    color: #515a6e;
  }
</style>
